<!DOCTYPE html>
<!--
	作者：offline
	时间：2018-12-21
	描述：免费课程
-->
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="../../../static/inxweb/css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../../static/inxweb/css/theme.css">
		<link rel="stylesheet" type="text/css" href="../../../static/inxweb/css/global.css">
		<link rel="stylesheet" type="text/css" href="../../../static/inxweb/css/web.css">
		<link href="../../../static/inxweb/css/mw_320_768.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 768px)">
		<script type="text/javascript" src="../../../static/admin/js/highChart/jquery-1.8.2.min.js"></script>
		<!--<script type="text/javascript" src="../../../static/common/webutils.js"></script>-->
		<script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
		<script type="text/javascript" src="../../../static/inxweb/user/ucTop.js"></script>
		<!--<script type="text/javascript" src="../../../static/inxweb/header/header.js"></script>-->
		<script type="text/javascript" src="../../../static/inxweb/js/common.js"></script>

	</head>

	<body>
		<article class="col-7 fl">
			<div class="u-r-cont" id="courseList">
				<section>
					<div>
						<section class="c-infor-tabTitle c-tab-title">
							<a href="#" title="Wo的课程" @click="freeCourse" :class="{current:free}"  >免费课程</a>
							<a href="#" title="观看记录" @click="viewCourse" :class="{current:view}">观看记录</a>
						</section>
					</div>
					<div class="mt40">
						<div class="u-course-list" >
							<article class="comm-course-list">
								<ul class="clearfix">
									<li v-for="c in courses">
										<div class="cc-l-wrap">
											<section class="course-img"> <img :src="c.logo" class="img-responsive" :alt="c.courseName" />
												<div class="cc-mask">
													<a href="#" title="" @click="playVideo(c.courseId)" class="comm-btn c-btn-1">继续学习</a>
												</div>
											</section>
											<h3 class="hLh30 txtOf mt10"> <a href="#" title="c.courseName" @click="playVideo(c.courseId)" class="course-title fsize18 c-333">{{c.courseName}}</a> </h3>
											<section class="mt10 of">
												<div class="time-bar-wrap">
													<div class="lev-num-wrap" title="已学0%">
														<aside class='lev-num-bar bg-green' :style="{width:c.percentage+'%'}"></aside> <span class="lev-num"><big>{{c.percentage==null?0:c.percentage}}%</big>/<small>100%</small></span> </div>
												</div>
											</section>
										</div>
									</li>
								</ul>
							</article>
							<script type="text/javascript" src="../../../static/common/web/js/page.js"></script>
							<div class="paging">
								<a href="javascript:goPage(1);" title="">首</a>
								<a id="backpage" class="undisable" href="javascript:void(0)" title="">&lt;</a>
								<a id="nextpage" href="javascript:goPage(2);" title="">&gt;</a>
								<a href="javascript:goPage(2);" title="">末</a>
								<div class="clear"></div>
							</div>
							<script type="text/javascript">
								var totalPageSize = 2;
								var currentPage =
									0 < 1 ? 1 : 1;
								var totalPage = 2;
								showPageNumber();
							</script>
							<form method="post" id="searchForm" action="http://localhost:8081/uc/freeCourseList"> <input type="hidden" id="pageCurrentPage" name="page.currentPage" value="1" /> </form>
						</div>
						<script src="../../../js/vue.min.js"></script>
						<script src="../../../js/axios.min.js"></script>
						<script>
							var courseList = new Vue({
								el: "#courseList",
								data: {
									courses: [],
									free:true,
									view:false
								},
								created: function() {
//									this.$options.methods.freeCourse();
									this.freeCourse();
								},
								methods: {
									playVideo: function(courseId) {
										var courseId = localStorage["courseId"];
										parent.location.href = "../../course/video.html";
									},
									freeCourse: function() {
										this.free=true;
										this.view=false;
										var that = this;
										axios.defaults.headers.common["token"] = localStorage["token"];
										axios.get("http://localhost:9095/user/freeCourse", {
												params: {
													userId: localStorage.getItem("userId")
												}
											})
											.then(function(response) {
												if(response.data.code == 200) {
													that.courses = response.data.data
												} else {
													alert(response.data.message)
												}
											})
									},
									viewCourse: function() {
										this.free=false;
										this.view=true;
										var _this = this;
										axios.defaults.headers.common["token"] = localStorage["token"];
										axios.get("http://localhost:9095/user/viewCourse", {
												params: {
													userId: localStorage.getItem("userId")
												}
											})
											.then(function(response) {
												if(response.data.code == 200) {
													_this.courses = response.data.data
												} else {
													alert(response.data.message)
												}
											})
									}
								}

							})
						</script>
					</div>
				</section>
			</div>
		</article>
	</body>

</html>